import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {
  const ButtonDemo({super.key});

  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    final Widget textButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {},
          style: ButtonStyle(
            foregroundColor: MaterialStatePropertyAll(Colors.pink[400]),
            // backgroundColor: MaterialStatePropertyAll(Colors.pink[50]),
            overlayColor: MaterialStatePropertyAll(Colors.pink[100]),
            // elevation: const MaterialStatePropertyAll(10),
          ),
          child: const Text('ButtonDemo'),
        ),
        const SizedBox(
          width: 20,
        ),
        TextButton.icon(
          icon: const Icon(Icons.add),
          label: const Text('ButtonDemo'),
          onPressed: () {},
          style: ButtonStyle(
            foregroundColor: MaterialStatePropertyAll(Colors.pink[400]),
            backgroundColor: MaterialStatePropertyAll(Colors.pink[50]),
            overlayColor: MaterialStatePropertyAll(Colors.pink[100]),
            elevation: const MaterialStatePropertyAll(10),
          ),
        )
      ],
    );

    // ignore: unused_local_variable
    final Widget elevatedButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {
            debugPrint('调皮');
          },
          child: const Text('ElevatedButton'),
        ),
        ElevatedButton.icon(
          icon: const Icon(Icons.add),
          label: const Text('ElevatedButton'),
          onPressed: () {},
        ),
      ],
    );

    // ignore: unused_local_variable
    final Widget outlineButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton(
          onPressed: () {},
          child: const Text('oulineButton'),
        ),
        OutlinedButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.add),
          label: const Text('oulineButton'),
        )
      ],
    );

    // ignore: unused_local_variable
    final Widget fixedWidthButton = Row(
      children: [
        textButtonDemo,
        SizedBox(
          width: 130,
          child: OutlinedButton(
            style: const ButtonStyle(
                textStyle: MaterialStatePropertyAll(
                  TextStyle(
                    fontWeight: FontWeight.w800,
                  ),
                ),
                // side: MaterialStateBorderSide.resolveWith((states) => const BorderSide(color: Colors.amber,width: 2)),
                side: MaterialStatePropertyAll(BorderSide(color: Colors.amber)),
                overlayColor: MaterialStatePropertyAll(Colors.amber)),
            onPressed: () {},
            child: const Text('data'),
          ),
        )
      ],
    );

    // ignore: unused_local_variable
    final Widget expandedButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: OutlinedButton(
            style: const ButtonStyle(
                textStyle: MaterialStatePropertyAll(
                  TextStyle(
                    fontWeight: FontWeight.w800,
                  ),
                ),
                foregroundColor:
                    MaterialStatePropertyAll(Color.fromARGB(255, 38, 38, 38)),
                // side: MaterialStateBorderSide.resolveWith((states) => const BorderSide(color: Colors.amber,width: 2)),
                side: MaterialStatePropertyAll(
                    BorderSide(color: Color.fromARGB(255, 75, 75, 75))),
                overlayColor: MaterialStatePropertyAll(
                    Color.fromARGB(255, 119, 119, 119))),
            onPressed: () {},
            child: const Text('OutlinedButton'),
          ),
        ),
        const SizedBox(
          width: 20,
        ),
        Expanded(
          flex: 2,
          child: OutlinedButton(
            style: const ButtonStyle(
                textStyle: MaterialStatePropertyAll(
                  TextStyle(
                    fontWeight: FontWeight.w800,
                  ),
                ),
                foregroundColor:
                    MaterialStatePropertyAll(Color.fromARGB(255, 38, 38, 38)),
                // side: MaterialStateBorderSide.resolveWith((states) => const BorderSide(color: Colors.amber,width: 2)),
                side: MaterialStatePropertyAll(
                    BorderSide(color: Color.fromARGB(255, 75, 75, 75))),
                overlayColor: MaterialStatePropertyAll(
                    Color.fromARGB(255, 119, 119, 119))),
            onPressed: () {},
            child: const Text('OutlinedButton'),
          ),
        )
      ],
    );

    final Widget buttonBarDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Theme(
          data: Theme.of(context).copyWith(
              buttonBarTheme: const ButtonBarThemeData(
            buttonPadding: EdgeInsets.symmetric(horizontal: 32),
          )),
          child: ButtonBar(
            children: [
              OutlinedButton(
                style: ButtonStyle(
                    foregroundColor:
                        const MaterialStatePropertyAll(Colors.amber),
                    side: const MaterialStatePropertyAll(
                        BorderSide(color: Colors.amber, width: 2)),
                    overlayColor: MaterialStatePropertyAll(Colors.amber[100])),
                onPressed: () {},
                child: const Text('Button'),
              ),
              OutlinedButton(
                style: ButtonStyle(
                    foregroundColor:
                        const MaterialStatePropertyAll(Colors.amber),
                    side: const MaterialStatePropertyAll(
                        BorderSide(color: Colors.amber, width: 2)),
                    overlayColor: MaterialStatePropertyAll(Colors.amber[100])),
                onPressed: () {},
                child: const Text('Button'),
              )
            ],
          ),
        ),
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: const Text('ButtonDemo'),
        elevation: 0,
      ),
      body: Container(
        padding: const EdgeInsets.all(6),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            textButtonDemo,
            elevatedButtonDemo,
            outlineButton,
            fixedWidthButton,
            expandedButton,
            buttonBarDemo,
          ],
        ),
      ),
    );
  }
}